<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script></script>
	</head>
	<body>
		<div>
			<input type="text" id="a1" onblur="abc(this)" />
			<span name="a2"></span>
			<button onclick="document.getElementById('a1').focus()">nnn</button>
			
			<div onclick="b1()" id="b1">
				aaa
				<div id="b2" onclick="b2()">bbb</div>
				
			</div>
		</div>
		<script>
			
			function b1 () {
				alert("b1")
			}
			
			function b2 () {
				// event.stopPropagation(); // 阻止事件的冒泡。
				alert("b2")
			}
			
			// 事件的捕获
			// document.getElementById("b1").addEventListener("click", function(){
			// 	alert("b1")
			// }, true)
			// document.getElementById("b2").addEventListener("click", function(){
			// 	alert("b2")
			// }, true)
			
			
			function abc(ele) {
				n1.style = "color: blue"
			}
			
			// 根据ID获取元素
			var n = document.getElementById("a1");
			
			n.onfocus = function() {
				n1.style.color = "red"
			}
			
			
			console.info(n)
			document.getElementById("a1").value = "hello world"
			
			// 根据name获取元素数组。   id是唯一的，name可以重复
			var n1 = document.getElementsByName("a2")[0];
			n1.innerHTML = "hello world"
			// 字体颜色： 操作样式
			// n1.style.color="red"
			// n1.style = "color: blue"
			
			// 事件
			// onclick 
			// onblur
			// onchange
			// oninput
			// onsubmit
			// onfocus
			
			function abc( a = 'hello', b) {
			    
			    // var n = a || 'hello'
			    console.info(a)
			}
			abc() // hello
			abc("world") // world
			

			var a = [1, 3, 5]
			for (var b in a) {
				console.info(a[b])
			}
			
		</script>
		
	</body>
	
</html>
